<template>
  <view class="cs-icon" @click="emit('click')" :style="containerStyle">
    <view
      class="cs-icon_icon"
      :class="{
        active: isActive,
      }"
      :style="iconStyle"
    >
      <wd-icon :class-prefix="iconPrefix" :name="icon" :size="size" :color="color" />
      <view v-if="showMore" class="cs-icon_more" :style="moreStyle">
        <wd-icon
          class-prefix="tn-icon"
          name="more-circle-fill"
          :color="isActive ? undefined : '#c0c0c0'"
        />
      </view>
    </view>
    <view class="mt-1 text-center text-sm flex justify-center w-full" v-if="text">
      <!-- <wd-text :text="text" /> -->
      {{ text }}
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import { addUnit } from 'wot-design-uni/components/common/util'

defineOptions({
  name: 'Cs-Icon',
})

const emit = defineEmits<{ click: [] }>()

const props = withDefaults(
  defineProps<{
    icon: string
    iconPrefix?: string
    size?: string
    text?: string
    color?: string
    containerPadding?: number
    isActive?: boolean
    showMore?: boolean
  }>(),
  {
    size: '22',
    containerPadding: 18,
  },
)

// refer to: https://cn.vuejs.org/api/reactivity-utilities#toref
const text = toRef(props, 'text')
const isActive = toRef(props, 'isActive')

const { size, containerPadding } = props

const buildContainerSize = (size: string) => {
  return addUnit(Number(size) + containerPadding)
}

const containerSize = buildContainerSize(size)

const containerStyle: CSSProperties = {
  width: containerSize,
}

const iconStyle: CSSProperties = {
  width: containerSize,
  height: containerSize,
}

const moreSize = buildContainerSize((Number(size) / 30).toString())
const moreStyle: CSSProperties = {
  width: moreSize,
  height: moreSize,
  lineHeight: moreSize,
}
</script>

<style lang="scss" scoped>
$cs_icon_default_icon_color: #e7e7e7;
$cs_icon_active_icon_color: #9e9e9e;

.cs-icon {
  vertical-align: center;
}

.cs-icon_icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $cs_icon_default_icon_color;
  border-radius: 50%;

  &.active {
    background-color: $cs_icon_active_icon_color;
  }

  .cs-icon_more {
    position: absolute;
    right: -10rpx;
    bottom: -10rpx;
  }
}
</style>
